<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="no" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/bank.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_945814_fzxdotou85u.css"/>
    <title>金融银行</title>
</head>

<body>
<!--banner-->
<section class="banner">
    <div class="b1" flex>
    <div class="ss" flex="cross:center">
        <input type="text" placeholder="点击输入你想要的内容"/>
        <i class="iconfont icon-sousuo"></i>
    </div>
        <div class="kefu" flex="cross:center">
            <i class="iconfont icon-kefu"></i>
        </div>
    </div>
    <ul class="list" flex>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-zhifu1"></i>
            <p>刷卡收款</p>
        </li>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-zhifu"></i>
            <p>无卡支付</p>
        </li>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-quanzi"></i>
            <p>附近商圈</p>
        </li>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-xinyongqia"></i>
            <p>还信用卡</p>
        </li>
    </ul>


</section>
<!--第二层-->
<section class="f1">
    <ul class="list1">
        <li>
            <div class="i1">
                <i class="iconfont icon-youhuiquan"></i>
            </div>
            <p>优惠券</p>
        </li>
        <li>
            <div class="i2">
                <i class="iconfont icon-liwu"></i>
            </div>
            <p>推荐有礼</p>
        </li>
        <li>
            <div class="i3">
                <i class="iconfont icon-shangcheng1"></i>
            </div>

            <p>我的商城</p>
        </li>
        <li>
            <div class="i4">
                <i class="iconfont icon-maidanshoukuanjilu"></i>
            </div>

            <p>惠买单</p>
        </li>
        <li>
            <div class="i5">
                <i class="iconfont icon-banqiaguashiwenti"></i>
            </div>

            <p>推荐办卡</p>
        </li>
        <li>
            <div class="i6">
                <i class="iconfont icon-jinrong"></i>
            </div>

            <p>金融理财</p>
        </li>
        <li>
            <div class="i7">
                <i class="iconfont icon-ic2"></i>
            </div>

            <p>极速贷款</p>
        </li>
        <li>
            <div class="i8">
                <i class="iconfont icon-handle-card-empty"></i>
            </div>

            <p>行用卡申请</p>
        </li>

    </ul>

</section>
<!--第三层-->
<section class="f2">
    <img src="../img/banner22.png">

</section>
<!--第四层-->
<section class="f3">
    <div class="f3-1" flex="cross:center">
        <div class="sekuai"></div>
        <span>收支明细 </span>
    </div>
    <div class="list2" flex>
        <div>
            <span class="span1">￥</span>
            <span class="span2">168.5</span>
            <span class="span3">万</span>
            <p>本月收款金额</p>
        </div>
        <i flex="main:center cross:center">
            <i class="xian" ></i>
        </i>
        <div>
            <span class="span1">￥</span>
            <span class="span2">16.05</span>
            <span class="span3">元</span>
            <p>本月支出金额</p>
        </div>
    </div>
    <div class="button" flex="main:center cross:center">
        <button type="button">
        查看详细账单
    </button>
    </div>

</section>
<!--浮动-->
<section class="fuceng">
    <ul class="list3" flex>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-Wicon-shouye"></i>
            <p>首页</p>
        </li>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-licai"></i>
            <p>理财</p>
        </li>
        <li class="li3" flex="main:center cross:center dir:top">
            <i class="iconfont icon-xiaoxi"></i>
            <p>消息</p>
            <div class="dian">
            </div>
        </li>
        <li flex="main:center cross:center dir:top">
            <i class="iconfont icon-wode5"></i>
            <p>我的</p>
        </li>
    </ul>
</section>
</body>

</html>